<!DOCTYPE HTML>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>登陆界面</title>
	</head>
	<body>
        <!--登陆-->
		 <form>
		   <div class="mb-3">
			 <input type="text" class="form-control" id="username" placeholder="请输入用户名：">
		   </div>
		   <div class="mb-3">
			 <input type="password" class="form-control" id="password" placeholder="请输入密码：">
		   </div>
		 </form>
		 <button type="button" onclick="login()">登录</button>
		<br><br>
        <!--注册新用户-->
		 <form>
		   <div class="mb-3">
			 <input type="text" class="form-control" id="username1" placeholder="请输入用户名：">
		   </div>
		   <div class="mb-3">
			 <input type="password" class="form-control" id="password2" placeholder="请输入密码：">
		   </div>
		   <div class="mb-3">
			 <input type="password" class="form-control" id="password3" placeholder="请再次输入密码：">
		   </div>
		 </form>
		 <button type="button" onclick="signUp()" >注册新用户</button>
		<br><br>

		 <!-- 注销账户 -->
		 <form>
		   <div class="mb-3">
			 <input type="text" class="form-control" id="username11" placeholder="请输入用户名：">
		   </div>
		   <div class="mb-3">
			 <input type="password" class="form-control" id="password22" placeholder="请输入密码：">
		   </div>
		   <div class="mb-3">
			 <input type="password" class="form-control" id="password33" placeholder="请再次输入密码：">
		   </div>
		 </form>
		 <button type="button" onclick="logoff();" >注销账户</button>
		<br><br>

		 <!-- 修改密码 -->
		 <form>
		   <div class="mb-3">
			 <input type="text" class="form-control" id="username111" placeholder="请输入用户名：">
		   </div>
		   <div class="mb-3">
			 <input type="password" class="form-control" id="password222" placeholder="请输入密码：">
		   </div>
		   <div class="mb-3">
			 <input type="password" class="form-control" id="password333" placeholder="请输入新密码：">
		   </div>
		 </form>
		 <button type="button" onclick="changePwd();" >修改密码</button>
		<br><br>
	</body>
	<script>
		//登录逻辑判断
		function login(){
			console.log("成功进入该函数！");//验证是否进入函数
			let name = document.getElementById("username").value;//拿到用户名和密码
			let pwd = document.getElementById("password").value;//打印拿到的用户名和密码
			console.log(name);
			console.log(pwd);
			//做登录校验
			//第一步 输入非空校验
			//1.判断用户名是否为空
			if(name == null || name === ""){
				alert("请输入用户名!");
			}else{
				//2.判断密码是否为空
				if(pwd == null || pwd === ""){
					alert("请输入密码!");
				}
				else{
					//第二步 判断用户名和密码是否正确
					loadXMLDoc(name,pwd,null,1);
				}
			}
		}
		//注册逻辑判断
		function signUp(){
			//拿到三个输入框的值
			let userName = document.getElementById("username1").value;
			let pwd = document.getElementById("password2").value;
			let checkPwd = document.getElementById("password3").value;
			//任意一个输入框为空都不通过
			if(userName == null || userName === "" || pwd == null || pwd === "" ||checkPwd == null || checkPwd === ""){
				alert("请完善注册信息!");
			}else{
				if(pwd === checkPwd){
					loadXMLDoc(userName,pwd,checkPwd,2);                         //打开客户端
				}else{
					alert("两次密码输入不一致!");
				}
			}
		}
		//注销账号逻辑判断
		function logoff(){
			//拿到三个输入框的值
			let userName = document.getElementById("username11").value;
			let pwd = document.getElementById("password22").value;
			let checkPwd = document.getElementById("password33").value;
			//任意一个输入框为空都不通过
			if(userName == null || userName === "" || pwd == null || pwd === "" ||checkPwd == null || checkPwd === ""){
				alert("请完善信息!");
			}else{
				if(pwd === checkPwd){
					loadXMLDoc(userName,pwd,checkPwd,3);                         //打开客户端
				}else{
					alert("两次密码输入不一致!");
				}
			}
		}
		//修改密码逻辑判断
		function changePwd(){
			//拿到三个输入框的值
			let userName = document.getElementById("username111").value;
			let pwd = document.getElementById("password222").value;
			let newPwd = document.getElementById("password333").value;
			//任意一个输入框为空都不通过
			if(userName == null || userName === "" || pwd == null || pwd === "" ||newPwd == null || newPwd === ""){
				alert("请完善信息!");
			}else{
				loadXMLDoc(userName,pwd,newPwd,4);                         //修改密码不用两个密码一致
			}
		}
		//这是客服端
		function loadXMLDoc(userName,passWord,checkPwd,point) {
			const xhttp = new XMLHttpRequest();     //原生的专门用来和服务器做连接的
			xhttp.onload = function() {             //监听连接状态
				console.log(this.responseText);       //打印服务器回应
				let a = this.responseText;             //  1.判断this.responseText 是否为 true
				if(a === "true"){                       //	2.正确进行页面跳转
					alert("登录成功!");
					alert("1秒之后进入登录页面");
					setTimeout(function(){
						window.location.href="loginSuccess.html";
					},1000);
				}else if(a === "false"){
					alert("登录失败,用户名或密码错误!");                 //	3.错误进行弹出框提示
				}else if(a === "full"){
					alert("已存在账号，请登录或注销!");
				}else if(a === "false1"){
					alert("注销失败，用户名或密码错误!");
				}else if(a === "true1"){
					alert("注销成功！");
				}else if(a === "false2"){
					alert("修改密码失败，用户名或密码错误！");
				}else if(a === "true2"){
					alert("修改密码成功！");
				}else if(a === "ready"){
					alert("注册成功，1秒之后返回首页!");
					setTimeout(function (){
						window.location.href="index.html";
					}, 1000);
				}else{
				}
			}

			if(point === 1){             //判断调用客户端的是注册函数还是登录函数 还是注销账号
				let url = "http://127.0.0.1:8080/login?userName="+userName+"&passWord="+passWord;
				xhttp.open("GET", url);                    //设置连接方法和请求地址
				xhttp.send();                             //开始连接
			}else if(point === 2){
				let url = "http://127.0.0.1:8080/signup?userName="+userName+"&passWord="+passWord;
				xhttp.open("GET", url);                    //注册账号
				xhttp.send();
			}else if(point === 3){
				let url = "http://127.0.0.1:8080/logoff?userName="+userName+"&passWord="+passWord;
				xhttp.open("GET", url);                    //注销账号
				xhttp.send();
			}else if(point === 4){
				let url = "http://127.0.0.1:8080/changePwd?userName="+userName+"&passWord="+passWord+"&checkPwd="+checkPwd;
				xhttp.open("GET", url);
				xhttp.send();  											//修改密码
			}else{
				//其他功能待续。。。
			}
		}
	</script>
</html>